<script>
import Loader from '@/components/Loader/Loader.vue';

export default {
  name: "UserCard",
  components: { Loader },
  props: {
    userInfo: {
      type: Object,
      default: () => ({
        avatar: "",
        nickname: "",
        privilege: 0,
        identity_name: ""
      })
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  emits: ["click"],
};
</script>


<template>
  <view class="flex-row justify-between items-center section_4" @click="$emit('click')">
    <Loader :loading="loading">
      <view class="flex-row">
        <image class="image_7" :src="userInfo.avatar" />
        <view class="flex-col items-start group ml-16">
          <text class="text_3">{{ userInfo.nickname }}</text>
          <text class="font mt-46">身份：{{ userInfo.identity_name || userInfo.identity || userInfo.privilege }}</text>
        </view>
      </view>
    </Loader>
    <image class="image_8" src="/static/icon/towards.svg" />
  </view>
</template>


<style scoped lang="css">
.section_4 {
  padding: 24rpx 40rpx;
  background-color: #ffffff;
  border-radius: 24rpx;
}

.image_7 {
  border-radius: 80rpx;
  width: 160rpx;
  height: 160rpx;
}

.group {
  margin-top: 6.58rpx;
  margin-bottom: 3.18rpx;
}

.text_3 {
  color: #000000;
  font-size: 40rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 700;
  line-height: 38.86rpx;
}

.font {
  color: #000000;
  font-size: 20rpx;
  font-family: Microsoft YaHei UI;
  line-height: 19.64rpx;
}

.image_8 {
  width: 48rpx;
  height: 48rpx;
}
</style>